<template>
	<view :style="item.compStyle" :class="item.compClass">
		<titleBettweenAndContent 
		:config="getTitleConfig"
		@click="click(getTitleConfig)">
			<view slot="content">
				<scroll-view scroll-x="true" class="scroll-view">
					<view class="white-space_nowrap">
						<view class="scroll-view_x-item pre-hover" hover-class="hover" v-for="(item, index) in getList" :key="index" @tap.stop="click(item)">
							<image src="" mode="aspectFill" class="scroll-view-image"></image>
							<view class="mask">
								<view class="logo-box">
									<image src="" mode="heightFix" class="logo"></image>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</titleBettweenAndContent>
		<view style="height: 30rpx;"></view>
	</view>
</template>

<script>
	import titleBettweenAndContent from '../titleBettweenAndContent/titleBettweenAndContent.vue';
	import QSSuperComponentCustomCompMixin from '../QSSuperComponentCustomCompMixin.js'
	export default {
		mixins: [QSSuperComponentCustomCompMixin({componentType:'bargainBuy-1'})],
		components: { titleBettweenAndContent },
		props: {
			item: {
				type: Object,
				default: ()=>({})
			}
		},
		computed: {
			getTitleConfig() {
				const o = this.item?.attributes?.titleConfig || {};
				
				return { titleRightText: '全部活动', fontSize: '32rpx' , ...o};
			},
			getList() {
				return this.item?.attributes?.list || [];
			}
		}
	}
</script>

<style scoped>
	.scroll-view{
		backface-visibility: hidden;
		transform: translate3d(0, 0, 0);
		height: 270rpx;
		/* padding-left: 25rpx;
		padding-right: 25rpx; */
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		overflow: hidden;
	}
	.scroll-view_x{
		position: relative;
		display: flex;
		flex-direction: row;
		padding-left: 25rpx;
		padding-right: 25rpx;
		white-space: nowrap;
		overflow: hidden;
	}
	.scroll-view_x-item{
		display: inline-block;
		position: relative;
		border-radius: 8rpx;
		overflow: hidden;
		margin-right: 15rpx;
		height: 270rpx;
		width: 200rpx;
	}
	.scroll-view_x-item:nth-child(1){
		margin-left: 25rpx;
	}
	.scroll-view_x-item:nth-last-child(1) {
		margin-right: 25rpx;
	}
	.scroll-view-image{
		height: 100%;
		width: 100%;
		background-color: #F2F2F2;
	}
	.mask{
		position: absolute;
		left: 0;
		bottom: 0;
		height: 60rpx;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.2);
	}
	
	.logo-box{
		position: absolute;
		left: 50%;
		top: 0;
		transform: translate(-50%, -50%);
		height: 48rpx;
		width: 130rpx;
		background-color: #ffffff;
		border-radius: 25rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.logo{
		height: 30rpx;
	}
</style>
